import React, {useState} from "react";

/*
* 函数组件是静态组件
*   第一次渲染组件把函数指向
*   + 产生一个私有的上下文（EC）
*   + 把解析出来的 props(含children，但是被冻结了)
*   + 对函数的返回的jsx元素，编译成virtualDOM，进行渲染
*   + 当我们点击按钮时，会把绑定的小函数指向
*   + 修改 EC 中的变量
*   + 私有变量值发生了改变
*   + “视图不会更新”
*   => 也就是，函数组件第一次渲染完毕后，组件中的内容，不会根据组件内的某些操作，再进行更新，所以称为静态组件
*   => 除非，在父组件中，重新调用这个函数组件(可以传递不同的属性信息)
*
*   真实项目中，有这样的需求：第一次渲染就不会再变化的，可以使用函数组件！！！
*   但是大部分需求，都需要在第一次渲染完毕后，基于组件的某些操作，让组件可以更新
*   ==> （方法：）
*          + 1. 类组件
*          + 2. Hooks组件(在函数中使用hooks函数)
* */

/*
*  执行一次 useState：把需要的状态信息都放到对象中统一管理
*       + 执行 setState 方法时，会统一替换
*       + 并不会想类组件中 this.setState一样，不支持部分状态更新
*       + 应该改为 setState({ ...state,supNum: state.supNum + 1 })
*   官方建议时：需要多个状态，就把 useState 执行多次即可
* */

const Vote = function (props) {
    let {title} = props
    let [state, setState] = useState({
        supNum: 15,
        oppNum: 5
    })

    const handle = (type) => {
        console.log(type, 111)
        if (type === 'sup') {
            setState({
                ...state,
                supNum: state.supNum + 1
            })
        } else {
            setState({
                ...state,
                oppNum: state.oppNum + 1
            })
        }

    }

    return <div className={'vote-box'}>
        <div className={'header'}>
            <h2 className={'title'}>{title}</h2>
            <span>{state.supNum + state.oppNum}人</span>
        </div>
        <div className={'main'}>
            <p>支持人数：{state.supNum}人</p>
            <p>反对人数：{state.oppNum}人</p>
        </div>
        <div>
            <button onClick={handle.bind(null, 'sup')}>支持
            </button>
            <button onClick={handle.bind(null, 'opp')}>反对
            </button>
        </div>
    </div>
}

export default Vote